<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>曲线</title>
    <style>
        /*不能在里面设置宽高*/
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
<button id="bt">点击绘画</button>
<hr>

</body>


<script>
    const canvas = document.createElement('canvas');
    document.body.append(canvas)
    canvas.width = 600
    canvas.height = 400
    const ctx = canvas.getContext('2d')
    //canvas有圆弧曲线和贝塞尔曲线

    const geneateCanvas = () => {
        //暂停2s后重新绘制
        setTimeout(() => {

            //画笑脸
            //https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/arc
            //画圆弧,弧度,0-2pi,最后个参数是取反，从0逆时针转到1弧度为止
            ctx.arc(200,200,100,0,deg2Arc(360));
            //多次stroke+(beginPath,closePath),否则连线也会被带上
            ctx.stroke();

            //嘴巴
            ctx.beginPath();
            ctx.arc(200,200,80,0,deg2Arc(180))
            ctx.stroke();
            ctx.closePath();

            //鼻子
            ctx.beginPath();
            //https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/ellipse
            //ellipse椭圆,rotation非0的话椭圆会顺时针歪的
            ctx.ellipse(200,200,10,20,deg2Arc(90),0,deg2Arc(360));
            ctx.stroke();
            ctx.closePath();

            //眼睛1
            ctx.beginPath();
            ctx.arc(150,150,10,0,deg2Arc(360));
            ctx.stroke();
            ctx.closePath();

            //眼睛2
            ctx.beginPath();
            ctx.arc(250,150,10,0,deg2Arc(360));
            ctx.stroke();
            ctx.closePath();

        }, 2000);


    }

    const button = document.getElementById('bt');
    button.addEventListener('click', geneateCanvas)

    const deg2Arc=(deg)=>{
        return (deg * Math.PI) / 180;
    }
</script>
</html>